<template>
	<view class="upload-wrap u-p-70">
		<view class="u-flex-1 house-upload u-rela" @click="uoloadHouse">
			<view class="house-camera u-abso">
				<image src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/camera.svg" class="u-m-b-8 upload-img"></image>
				<text class="u-font-24 u-flex u-row-around" style="color:#D2D2D2;">上传图片</text>
			</view>

			<image @click="seeImg" :src="imgFile" class="u-abso housr-image" v-show="imgFile"></image>
			<image @click="deleteImg" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/delete.png" class="u-abso image-delete" v-show="imgFile"></image>
		</view>
		<view class="examin-btn">
			<button class="yilingqu" @click="uploadImg">提交信息</button>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				imgFile: null,
				url: null,
				subFlag: false
			}
		},
		methods: {
			confirm(){
				console.log('aaaaaa')
			},
			// 选择图片
			uoloadHouse() {
				if (!this.imgFile) {
					let _this = this;
					uni.showActionSheet({
						itemList: ['手机拍照', '本地图片上传'],
						success: function(res) {
							if (res.tapIndex == 0) {
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera '],
									success: function(res) {
										_this.imgFile = res.tempFilePaths[0];
										pathToBase64(res.tempFilePaths[0]).then(res => {
											_this.subFlag = true;
											_this.$request.api.image({
												imageBase64: res
											}).then(res => {
												_this.subFlag = false;
												_this.url = res.data.data
											})
										})
									}
								})
							} else {
								uni.chooseImage({
									count: 1, //默认9
									sizeType: ['original', 'compressed'],
									sourceType: ['album  '],
									success: function(res) {
										_this.imgFile = res.tempFilePaths[0];
										pathToBase64(res.tempFilePaths[0]).then(res => {
											_this.subFlag = true;
											_this.$request.api.image({
												imageBase64: res
											}).then(res => {
												_this.subFlag = false;
												_this.url = res.data.data
											})
										})
									}
								});
							}
						},
						fail: function(res) {}
					});
				}
			},
			// 删除图片
			deleteImg() {
				let _this = this;
				uni.showModal({
					content: '是否删除该张图片',
					success: function(res) {
						if (res.confirm) {
							_this.imgFile = null;
							_this.url = null;
						} else if (res.cancel) {}
					}
				});
			},
			// 查看图片
			seeImg() {
				let _this = this
				uni.previewImage({
					urls: [_this.url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			async uploadImg() {
				if (this.url) {
					if (this.$Route.query.type == 1) {
						let res = await this.$request.api.homeSub({
							mobile: uni.getStorageSync('phone'),
							room_picture: this.url,
							room_id: this.$Route.query.room_id
						})

						if (res.data.status == 200) {
							this.$Router.push({
								path: '/homePage1/examine/examine',
								query: {
									examineNum: 2
								}
							})
						}
					} else {
						let res = await this.$request.api.resHomeSub({
							mobile: uni.getStorageSync('phone'),
							picture: this.url,
							roomId: this.$Route.query.room_id
						})
						if (res.data.status == 200) {
							this.$refs.uToast.show({
								title: '上传成功',
								type: 'success',
							})
							this.$Router.back(1)
						}
					}

				} else {
					this.$refs.uToast.show({
						title: '请上传房本',
						type: 'error',
					})
				}

			}
		}
	}
</script>

<style lang='scss'>
	.upload-wrap {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;

		.house-upload {
			height: 336rpx;
			background: #f6f6f6;
			border-radius: 12rpx;

			.house-camera {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 112rpx;
				height: 162rpx;

				.upload-img {
					width: 112rpx;
					height: 100rpx;
				}
			}

			.housr-image {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			.image-delete {
				width: 50rpx;
				height: 50rpx;
				top: 40rpx;
				right: 40rpx;
			}
		}

		.examin-btn {
			width: 570rpx;
			height: 70rpx;
			margin: 60rpx auto 0;
		}
		.yilingqu {
			width: 80%;
			height: 84rpx;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 44rpx;
			line-height: 84rpx;
			color: #FFFFFF;
			text-align: center;
			font-size: 32rpx;
		}
		
	}
</style>
